import React, { useEffect, useRef } from "react";
import { CameraOutlined, SearchOutlined } from "@ant-design/icons";
import { Input, Select } from "antd";
import type { GetProps } from "antd";
import searchcss from "@/components/css/search.module.less";

function Search() {
  type SearchProps = GetProps<typeof Input.Search>;
  const { Search } = Input;
  const suffix = (
    <CameraOutlined
      style={{
        fontSize: 16,
        color: "#1677ff",
      }}
    />
  );
  const suffixs = (
    <SearchOutlined
      style={{
        fontSize: 16,
        color: "#fff",
      }}
    />
  );
  const { Option } = Select;
  const selectBefore = (
    <Select
      defaultValue="全部"
      style={{ width: 100 }}
      dropdownStyle={{ width: 100 }}
    >
      <Option value="全部">全部</Option>
      <Option value="H5">H5</Option>
      <Option value="海报">海报</Option>
      <Option value="长页">长页</Option>
      <Option value="表单">表单</Option>
      <Option value="互动">互动</Option>
      <Option value="电子画册">电子画册</Option>
      <Option value="视频">视频</Option>
      <Option value="解决方案">解决方案</Option>
    </Select>
  );
  const onSearch: SearchProps["onSearch"] = (value, _e, info) =>
    console.log(info?.source, value);

  // -----------

  const myRef = useRef(null);
  useEffect(() => {
    const scrollDistance = 100;
    window.onscroll = () => {
      const scrolled = window.pageYOffset || document.documentElement.scrollTop;
      console.log(scrolled, "111111");
      // 确保 myRef.current 不是一个 null 或 undefined
      if (myRef.current) {
        if (scrolled > scrollDistance) {
          myRef.current.style.display = "block"; // 显示div
        } else {
          myRef.current.style.display = "none"; // 否则滚动超过阈值时隐藏div
        }
      }
    };

    // 在组件卸载时移除事件监听器，避免内存泄漏
    return () => {
      window.onscroll = null;
    };
  }, []);
  // ------------
  return (
    <div
      className="box"
      ref={myRef}
      style={{ display: "none", zIndex: "1000" }}
    >
      <Search
        addonBefore={selectBefore}
        placeholder="123"
        enterButton={suffixs}
        size="large"
        suffix={suffix}
        onSearch={onSearch}
        style={{ zIndex: "1001" }}
      />
    </div>
  );
}

export default Search;
